(function () {
    axios.get('/api/collectupload').then(function (res) {
        // console.log(res.data.data);

        let html = ``;
        res.data.data.forEach(ele => {
            console.log(ele);
            let imgreg = /src=[\'\"]?([^\'\"]*)[\'\"]?/gi;
            // let imgArr = imgreg.exec(decodeURI(element.content));
            let imgArr = ele.content.match(imgreg);
            for (let i = 0; i < 3; i++) {
                // console.log(imgArr[i]);
            }
            // console.log(imgArr);
            // 匹配内容里面的文字，渲染
            let textReg1 = /<img.*?(?:>|\/>)/gi;
            let textStr = ele.content.replace(textReg1, '');
            let texts = textStr.replace(/(\<img\/>|\<p>|\<\/p>|\<h>|\<\/h>|\<br>)/gi, function ($0, $1) {
                return {
                    "<img/>": '',
                    "<p>": '',
                    "<h>": '',
                    "</p>": '',
                    "</h>": '',
                    "<br>": '',
                }[$1];
            })
            // console.log(ele.aid);
            html += `
                    <div class="avatar">
                    <div class="avatimg"> 
                        <img src=${ele.avater} alt="">
                        <div class="avatmol">
                            <div class="bbox">
                                <div class="bigavat">
                                    <img src=${ele.avater} alt="">
                                </div>
                                <a href="" style="margin-top: 25px;font-size: 20px;font-weight: 500;">
                                    <div class="nichen">${ele.username}</div>
                                    <div style="font-size: 12px;">${ele.introduce}</div>
                                </a>
                                <div class="molrig">
                                    <div class="support">
                                        <span class="suppor" style="font-size: 22px">${ele.supports}</span>
                                        <span >收到赞</span>
                                    </div>
                                    <div class="fan">
                                        <span style="font-size: 22px">${ele.fans}</span>
                                        <span>粉丝</span>
                                    </div>
                                </div>
                            </div>
                            <div class="icon">
                                <div class="sign" style="font-size: 13px;">
                                    <span class="iconfont">&#xe670;</span>
                                    <span>x2</span>
                                    <span class="iconfont">&#xe688;</span>
                                    <span>x2</span>
        
                                </div>
                                <div class="concern">关注Ta</div>
                            </div>
                        </div>
                    </div>
                    <div class="art_info"data-aid=${ele.aid} style="width: 590px; ">
                        <h2 class="artit" style="display: inline;font-size:18px">${ele.title}</h2>
                            <div class="author" style="font-size: 13px;color:#c1c1c1">
                            by
                                <div class="netname" style = "color:#c1c1c1;">${ele.username}</div>
                        </div>
                            <div>
                            <div class="longtext"
                                    style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 13px;margin: 4px 0 6px 0;color:#494646cc">
                                ${texts}
                            </div>
                            <div class="artimg" style="margin: 6px 0;">
                                    <img ${imgArr[0]} alt=""
                                    style="display: inline-block;width: 193px;height: 110px;" class="pic">
                                    <img ${imgArr[1]} alt=""
                                    style="display: inline-block;width: 193px;height: 110px;" class="pic">
                                    <img ${imgArr[2]} alt=""
                                    style="display: inline-block;width: 193px;height: 110px;" class="pic">
                            </div>
                            </div>
        
                        <div class="artaction" style="color:#8e8e8e;; font-size: 13px; display:flex;">
                            <span class="iconfont">&#xec8c; </span>
                            <span style="margin: 0 10px;" class="suppor">${ele.supports}</span>
                                <div>
                                <span class="iconfont">&#xe7dd;</span>
                                <span>${ele.share}</span>
                                </div>
                            <span class="times" style="margin-left:443px">${ele.addtimes.split('T')[0]}</span>
                        </div>
                    </div>
                    </a>
                </div>`;
        });
        let artlist = document.querySelector('.artlist');
        artlist.innerHTML = html;

    }).catch(function (error) {
        console.log(error);
    });

    window.onload = function () {
        // 点击文章跳转到详情页

        let artinfo = document.querySelectorAll('.art_info');
        console.log(artinfo);

        for (let i = 0; i < artinfo.length; i++) {
            let aid = artinfo[i].dataset.aid;
            // 跳转文章详情页
            artinfo[i] && artinfo[i].addEventListener('click', showInfo);
            function showInfo(event) {

                if (event.target.classList.contains('artit') || event.target.classList.contains('longtext') || event.target.classList.contains('pic')) {
                    // console.log(11);
                    axios.post('/api/articleinfo', { aid })
                        .then(res => {
                            console.log(res)
                            if (res.data.code === 1) {
                                window.location.href = `./articledetails.html?aid=${aid}`;
                            }
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }

            }
        }
    }

}

)();

// 样式
